<template>
  <div class="login-wrap">
      <el-card class="box-card">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.userName" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" clearable show-password></el-input>
            </el-form-item>
            <el-form-item class="btn-wrap">
            <el-button type="primary" @click="onSubmit">登录</el-button>
              <!-- <el-button type="primary" v-else @click="create">注册</el-button> -->
            </el-form-item>
          </el-form>
      </el-card>
  </div>
</template>

<script>
import {login, create} from '../utils/api/user'
export default {
    name: 'login',
    data() {
      return {
        showCreate: false,
        form: {
          userName: '',
          password: ''
        }
      }
    },
    // created() {
    //   if (window.localStorage.getItem('shoppingToken')) this.showCreate = true
    // },
    methods: {
     async onSubmit () {
       let res = await login(this.form)
       console.log(res)
       if (res.code === 200) {
         window.localStorage.setItem('shoppingToken', res.token)
         this.$message({
          message: res.msg,
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push('/')
        }, 100)
       }
      },
      async create () {
        let res = await create(this.form)
        if (res.code === 200) {
          this.showCreate = false
         this.$message({
          message: res.msg,
          type: 'success'
        })
       }
      }
    }
}
</script>

<style lang="less" scoped>
    .login-wrap {
        width: 100%;
        height: 100%;
        background-color: #45BE93;
        .box-card {
            position: absolute;
            top: 30%;
            left: calc(50% - 300px);
            width: 600px;
            height: 260px;
            background-color: #FAF6EE;
            .el-form {
              margin-top: 30px;
              .btn-wrap {
                text-align: center;
                /deep/.el-form-item__content {
                  margin-left: 0!important;
                  .el-button--primary {
                    background-color: #45BE93;
                    border-color: #45BE93;
                  }
                }
              }
            }
        }
    }
</style>